<template>
  <div class="app-container">
    <el-alert
      show-icon
      type="warning"
      title="配置说明"
      description="删除某个角色时，必须保证没有人员在此角色中！需将有此角色的员工调岗后再进行删除操作！"
    />

    <div style="padding: 5px;" />
    <el-button type="primary" size="small" @click="onclickAddPosition">添加角色</el-button>

    <div style="padding: 5px;" />
    <el-table :data="list" border row-key="id" align="left">
      <el-table-column label="角色编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="角色名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="在职角色人数" align="center">
        <template slot-scope="scope">
          {{ scope.row.cnt }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" plain @click="onclickModifyName(scope.row.id)">
            修改名称</el-button>
          <el-button v-if=" scope.row.cnt>0" type="primary" size="mini" plain @click="chakanPosMembers(scope.row.id)">
            查看该角色员工</el-button>
          <el-button v-if=" scope.row.cnt==0" type="danger" size="mini" plain @click="onClickDelPosition(scope.row.id)">
            删除</el-button>
          

        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新建角色" width="50%" :visible.sync="addPositionDialog.visible">
      <el-form>
        <el-form-item label="角色名称">
          <el-input v-model="addPositionDialog.positionName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addPositionDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="addDepart">新 建</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改角色名称" width="50%" :visible.sync="modifyNameDialog.visible">
      <el-form>
        <el-form-item label="角色名称">
          <el-input v-model="modifyNameDialog.name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyNameDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="modifyName">修 改</el-button>
      </div>
    </el-dialog>

    <el-dialog title="角色人员" width="50%" :visible.sync="memberListDialog.visible">
      <el-table :data="memberListDialog.list" border align="center">
        <el-table-column label="人员名称" align="left">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="部门" align="left">
          <template slot-scope="scope">
            {{ scope.row.departName }}
          </template>
        </el-table-column>
        <el-table-column label="岗位" align="left">
          <template slot-scope="scope">
            {{ scope.row.posName }}
          </template>
        </el-table-column>
        <el-table-column label="角色" align="left">
          <template slot-scope="scope">
            {{ scope.row.roleName }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="memberListDialog.visible = false">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  websock
} from '@/websock'
import {
  MessageBox
} from 'element-ui'
export default {
  data() {
    return {
      list: null,
      memberListDialog: {
        visible: false,
        list: null
      },
      addPositionDialog: {
        visible: false,
        positionName: ''
      },
      modifyNameDialog: {
        visible: false,
        id: 0,
        name: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      websock.getRoleList().then(data => {
        console.log(data)
        this.list = data
      })
    },
    onclickAddPosition() {
      this.addPositionDialog.visible = true
      this.addPositionDialog.positionName = ''
    },
    onclickModifyName(id) {
      this.modifyNameDialog.visible = true
      this.modifyNameDialog.name = ''
      this.modifyNameDialog.id = id
    },
    addDepart() {
      this.addPositionDialog.visible = false
      websock.addRole({
        roleName: this.addPositionDialog.positionName
      }).then(() => {
        this.fetchData()
      })
    },
    modifyName() {
      this.modifyNameDialog.visible = false
      websock.modifyRoleName({
        name: this.modifyNameDialog.name,
        id: this.modifyNameDialog.id
      }).then(() => {
        this.fetchData()
      })
    },
    onClickDelPosition(id) {
      MessageBox.confirm('是否删除角色', '是否删除角色', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        websock.delRole({
          id
        }).then(() => {
          this.fetchData()
        })
      })
    },
    async chakanPosMembers(id) {
      this.memberListDialog.list = null
      const res = await websock.roleMembers({
        id
      })
      console.log('chakan pos members', res)
      this.memberListDialog.list = res
      this.memberListDialog.visible = true
    }
  }
}
</script>
